// noinspection JSUnusedGlobalSymbols

import { Chart } from '@antv/g2';

/**
 *  创建折线图.
 *
 *  @param config 折线图配置项.
 *  @return chart 折线图实例对象.
 */
function drawLineChart(config) {
    // 1. 读取图表配置.
    const {
        container,
        position,
        color,
        alias,
    } = config;

    // 2. 创建图表.
    const chart = new Chart({
        container,
        forceFit: true,
        height: 300,
        animate: true,
        data: [],
    });

    // 3. 设置悬停提示信息.
    chart.tooltip({
        crosshairs: {
            type: 'line',
        },
    });

    // 4. 设置纵轴标题.
    const field = position.substring(position.indexOf('*') + 1);

    chart.axis(field, { title: {} });
    chart.scale(field, { alias });

    // 5. 绘制折线与转折点.
    chart
        .line()
        .position(position)
        .color(color)
        .shape('smooth');
    chart
        .point()
        .position(position)
        .color(color)
        .size(3)
        .shape('circle')
        .style({
            stroke: '#FFF',
            lineWidth: 1,
        });

    // 6. 渲染图表.
    chart.render();

    return chart;
}

/**
 *  创建圆环图.
 *
 *  @param config 圆环图配置项.
 *  @return chart 圆环图实例对象.
 */
function drawPieChart(config) {
    // 1. 读取图表配置.
    const {
        container,
        position,
    } = config;

    // 2. 创建图表.
    const chart = new Chart({
        container,
        forceFit: true,
        height: 300,
        animate: true,
    });

    // 3. 设置圆环大小.
    chart.coord('theta', {
        radius: 0.97,
        innerRadius: 0.55,
    });

    // 4. 绘制节点.
    const [x, y] = position.split('*');

    chart
        .intervalStack()
        .position(y)
        .color(x)
        .label(y, {
            formatter: function formatter(val, item) {
                return `${item.point.item}: ${val * 100}%`;
            },
        })
        .tooltip(position, (item, percent) => ({
                name: item,
                value: `${percent * 100}%`,
        }))
        .style({
            stroke: '#FFF',
            lineWidth: 1,
        })
        .select(false);

    // 5. 设置图例.
    // noinspection JSCheckFunctionSignatures
    chart.legend({
        position: 'right',
        offsetX: -70,
    });

    // 6. 渲染图表.
    chart.render();

    return chart;
}

/**
 *  创建时间线图.
 *
 *  @param config 时间线图配置项.
 *  @return chart 时间线图实例对象.
 */
function drawTimelineChart(config) {
    // 1. 读取图表配置.
    const { container } = config;

    // 2. 创建图表.
    const chart = new Chart({
        container,
        forceFit: true,
        height: 1000,
        padding: 120,
    });

    // 3. 转变图形显示方式.
    chart.coord('rect').transpose().scale(1, -1);

    // 4. 设置图例显示位置.
    // noinspection JSCheckFunctionSignatures
    chart.legend({
        position: 'top-right',
        marker: 'square',
        offsetY: -10,
    });

    // 5. 更改坐标轴设置.
    chart.axis('threadName', {
        line: null,
    });

    chart.interval().position('threadName*time').color('threadStatus', (st) => {
        switch (st) {
            case '运行':
                return '#2DC4B9';
            case '休眠':
                return '#F5A100';
            case '等待':
                return '#1890FF';
            case '监视':
                return '#7338E5';
            case '终止':
                return '#F26750';
            default:
                return '#FEF';
        }
    });

    // 6. 渲染图表.
    chart.render();

    return chart;
}

export default {
    drawLineChart,
    drawPieChart,
    drawTimelineChart,
};
